<!--
 * @Date: 2023-09-14 14:41:11
 * @LastEditTime: 2023-10-12 16:44:24
 * 介绍:违法关键词录入
-->
<script lang="ts" setup>
import { getCountdown } from "@@/utils/tools/date";
import dayjs from "dayjs";
import { useCurrentDate } from "@@/hooks/toolsHooks";
import { _require } from "@@/utils/tools";
import { apiWkAwaitBanWord, ApiWkAwaitBanWord } from "@@/api/wk/list";
import { add, divide, multiply } from "mathjs";
import router from "@@/router";
import { fixedDecimals } from "@@/utils/tools/format";

const { currentDate } = useCurrentDate();

function countdown(time: string, end_time_hour: StrNumber) {
  const res = getCountdown(
    currentDate.value,
    dayjs(time).add(Number(end_time_hour), "h")
  );
  if (res.diffTime <= 0) return false;
  return `${res.H}:${res.m}:${res.s}`;
}
function getRatio(ok: StrNumber, no: StrNumber) {
  ok = Number(ok);
  no = Number(no);
  const res = multiply(divide(ok, add(ok, no)), 100);
  return Number.isNaN(res) ? 0 : res;
}
function toBanWordVote(item: ApiWkAwaitBanWord.DataItem) {
  router.push({
    name: "wk-banWordVote",
    query: {
      json: JSON.stringify(item),
    },
  });
}
</script>
<template>
  <div style="padding-bottom: 200rem" class="auto-MT-lg">
    <Ccell
      @click="$router.push({ name: 'wk-banTotalList' })"
      class="flex-J-SB flex-A-C"
      show-right-icon
      active
    >
      <span>{{ $t("chaKanWeiGuiCiKu") }}</span>
    </Ccell>
    <CrequestList :api="apiWkAwaitBanWord" min-height="300rem">
      <template #item="{ item }">
        <Ccard class="auto-MT-md" @click="toBanWordVote(item)">
          <h3>{{ $t("wei-gui-ci") }}</h3>
          <div class="C-T3 MT-xs">
            {{ dayjs(item.created_at).format("YYYY-MM-DD HH:mm:ss") }}
          </div>
          <div class="flex-A-C B-M1-O2 C-M1 PD-xs PL-sm PR-sm MT-sm R-xs">
            <Cicon name="icon-shijian" />
            <div class="ML-xs">{{ $t("daoJiShi") }}</div>
            <div class="ML-auto">
              {{
                countdown(item.created_at, item.end_time_hour) ||
                $t("yi-jie-shu")
              }}
            </div>
          </div>
          <Ccard>
            {{ item.word }}
          </Ccard>
          <div>{{ $t("tong-guo-shuai") }}</div>
          <div class="PD-md MT-0">
            <Rslider
              :model-vlaue="getRatio(item.agree_num, item.disagree_num)"
              readonly
              :min="0"
              :max="100"
              :step="0.01"
              active-color="var(--C-success)"
              inactive-color="var(--C-fail)"
            >
              <template #button="{ value }">
                <CstateTag class="T-nowrap C-white">
                  {{ fixedDecimals(value, 0) }}%
                </CstateTag>
              </template>
            </Rslider>
          </div>
          <!-- <div class="T-A-R T-S-sm">
              <span>{{ $t("tou-piao-ren-shu") }}</span>
              {{ add(Number(item.agree_num), Number(item.disagree_num)) }}
            </div> -->
        </Ccard>
      </template>
    </CrequestList>
  </div>
</template>
<style lang="scss" scoped></style>
